<template>
  <div class="wrap">
    <div class="productionItem" v-for="(item, index) in resGoodsList" :key="index" @click="checkItem(item.id)">
      <div class="proIntroWrap">
        <div class="proIntroLeft">
          <img :src="$imgUrl + item.listImgUrl" alt="" class="proPoster" />
        </div>
        <div class="proIntroRight">
          <div class="proIntro">
            {{ item.goodsName }}
          </div>
          <div class="workTime">
            <div class="timeLeft">已售{{ item.saleNum }}</div>
            <div class="saleRight"><em class="moneyLogo">￥</em>{{ item.price }}</div>
            <img src="@/assets/circle2.png" alt="" class="circle" v-if="item.isChoose" />
            <img src="@/assets/circle.png" alt="" class="circle" v-else />
          </div>
        </div>
      </div>
    </div>
    <div style="height: 130px"></div>
    <div class="submit" @click="sureRecommend">确定</div>
  </div>
</template>

<script>
import { Switch } from "vant";
import {
  apiGetGoodsList,
  apiPlatformGetUserShopDetails,
  apiRecGoods,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      resGoodsList: [], //商品列表
      reqpageSize: 5, //分页条数
      reqPageNum: 0, //当前第几页
      noMore: false,
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    window.addEventListener("scroll", this.handleScroll, true);
    this.getShopDetails();
  },
  methods: {
    //分页 监听滑动事件
    handleScroll() {
      let Top = $(window).scrollTop();
      let WinH = $(window).height();
      let DocH = $(document).height();
      if (DocH - (Top + WinH) <= 0) {
        if (this.noMore) {
          return false;
        }
        this.noMore = false;
        this.getPlatformGoodsList();
      }
    },
    //店铺详情api获取商铺id：
    getShopDetails() {
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.shopId = res.data.id;
        this.getPlatformGoodsList(); //获取首次商品列表
      });
    },
    //获取商品列表：
    getPlatformGoodsList() {
      var page = (this.reqPageNum += 1);
      apiGetGoodsList({
        shopId: this.shopId,
        typeId: 0,
        pageNum: page,
        pageSize: this.reqpageSize,
        orderByColumn: "",
        isAsc: "",
      }).then((res) => {
        if (res.data.rows.length == 0) {
          this.noMore = true;
          return;
        }
        var dataRes = res.data.rows;
        res.data.rows.map((item) => {
          item.isChoose = false; //是否被选中
        });
        this.resGoodsList = [...this.resGoodsList, ...dataRes];
        console.log("resGoodsList-商品列表", this.resGoodsList);
      });
    },
    //勾选推荐的商品
    checkItem(i) {
      //勾选操作 点击item 将数组check==false状态变为true
      this.resGoodsList.map((item) => {
        if (item.id == i) {
          item.isChoose = !item.isChoose;
        }
      });
      console.log("勾选", this.resGoodsList);
    },
    //确定推荐
    sureRecommend() {
      var idsReq = [];
      this.resGoodsList.map((item) => {
        if (item.isChoose) {
          idsReq.push(item.id);
        }
      });
      apiRecGoods({
        ids: idsReq,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("设置推荐成功");
          this.$router.push({
            path: "/pages/bGoodsManng",
            query: {
              //传递参数
            },
          });
        }
      });
    },
  },
  created() {},
  components: {
    [Switch.name]: Switch,
  },
};
</script>

<style scoped>
.productionItem {
  width: calc(95% - 30px);
  margin: 0 auto;
  min-height: 110px;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px 15px;
  margin-top: 15px;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.circle {
  width: 20px;
  height: 20px;
}
.submit {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 5%;
}
</style>
